@charset "utf-8";
 *{
	margin: 0;
	padding: 0;
	fout-family:"华文彩云";
	fout-size:100px;
}
body{
	background: url(../img/bj.jpg);
	background-size: 100% 1200px;
	background-repeat: no-repeat;
}
.cat{
	width:200px;
	height:245px;
	bor der: 1px solid red;
	background: url(../img/11.png);
	background-size: 100% 100%;
	position: relative;
	top:8px;
	left:520px;
	animation: cat 3s linear infinite;
}
@keyframes cat{
	0%{
		top:8px;
		left:520px;
	}
	10%{
		top: 8px;
		left:626px ;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(1);
	}
	20%{
		top: 8px;
		left:732px;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(.5)rotate(360deg);
	}
	30%{
		top:8px ;
		left:838px ;
	    background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(1)rotate(360deg);
	}
	40%{
		top: 8px;
		left:900px ;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(.5);
	}
	50%{
		top:8px ;
		left:947px ;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(.5);
	}
	60%{
		top: 120px;
		left:947px ;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(1);
	}
	70%{
		top: 240pxpx;
		left:947px ;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(1);
	}
	80%{
		top:399px ;
		left: 947px;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(1)rotate(360deg);
	}
	90%{
		top:466px ;
		left: 947px;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(1)rotate(360deg);
	}
	100%{
		top:600px ;
		left:947px ;
		background: url(../img/11.png);
		background-size: 100% 100%;
		transform: scale(.3);
	}
	
}
      .cat2{
		  width: 300px;
		  height: 300px;
		  bor der: 1px solid red;
		  background: ur l(../img/4.png);
		  position: relative;
		  top:287px;
		  left:905px;
		  	animation: cat2 12s linear infinite;
		  }
		  
	  @keyframes cat2{
		  0%{			   
			  top:287px;
			  left:905px;
			   background: url(../img/4.png);
			   background-size: 100% 100%;
		  }
		  10%{			   
			  top:287px;
			  left:905px;
			   background: url(../img/4.png);
			   background-size: 100% 100%;
		  }
		  20%{			   
			  top:287px;
			  left:905px;
			   background: url(../img/4.png);
			   background-size: 100% 100%;
		  }
		  30%{
			  top:287px;
			  left:905px;
			   background: url(../img/4.png);
			   background-size: 100% 100%;
		  }
		  40%{
			  top:287px;
			  left:905px;
			   background: url(../img/4.png);
			   background-size: 100% 100%;
		  }
		  50%{
			  top:287px;
			  left:905px;
			  background: url(../img/5.png);
			  background-size: 100% 100%;
		  }
		  60%{
			  top:287px;
			  left:905px;
			   background: url(../img/5.png);
			  background-size: 100% 100%;
			  width: 300px;
			  height: 300px;
		  }
		  70%{
			  top:287px;
			  left:905px;
			   background: url(../img/5.png);
			   background-size: 100% 100%;
			   width: 300px;
			   height: 300px;
		  }
		  80%{
			  top:287px;
			  left:905px;
			   background: url(../img/5.png);
			   background-size: 100% 100%;
			   width: 300px;
			   height: 300px;
		  }
		  90%{
			  top:287px;
			  left:905px;
			   background: url(../img/5.png);
			   background-size: 100% 100%;
			   width: 300px;
			   height: 300px;
			   			   						   
		  }
		  100%{
			  top:287px;
			  left:905px;
			   background: url(../img/5.png);
			   background-size: 100% 100%;
			   width: 300px;
			   height: 300px;
		  }
		 
		  
	  }
	  .cat3{
		  width:200px;
		  height:245px;
		  bor der: 1px solid red;
		  background: url(../img/11.png);
		  background-size: 100% 100%;
		  position: relative;
		  top:-540px;
		  left: 100px;
		  animation: cat3 5s linear infinite;
	  }
	  @keyframes cat3{
		  0%{
			  top:-540px;
			  left: 100px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			 
		  }
		  10%{
			  top:-540px;
			  left: 286px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }		  
		  20%{
			  top:-540px;
			  left: 472px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.5)rotate(360deg);
		  }
		  30%{
			  top:-540px;
			  left: 658px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  40%{
			  top:-540px;
			  left: 844px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.5)rotate(360deg);
		  }
		  50%{
			  top:-540px;
			  left: 932px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.5);
		  }
		  60%{
			  top:-422px;
			  left: 932px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  70%{
			  top:-305px;
			  left: 932px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  80%{
			  top:-188px;
			  left: 932px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.8)rotate(360deg);
		  }
		  90%{
			  top:-100px;
			  left: 932px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.5);
		  }
		  100%{
			  top:-70px;
			  left: 932px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.3)rotate(360deg);
		  }
	  }
	  .cat4{
		  width:200px;
		  height:245px;
		  bor der: 1px solid red;
		  background: url(../img/11.png);
		  background-size: 100% 100%;
		  position: relative;
		  top:-784px;
		  left:295px;
		  animation: cat4 4s linear infinite;
	  }
	  @keyframes cat4{
		  0%{
			  top:-784px;
			  left:295px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
		  }
		  10%{
			  top:-784px;
			  left:458px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  20%{
			  top:-784px;
			  left:621px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1)rotate(360deg);
		  }
		  30%{
			  top:-784px;
			  left:784px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.5);
		  }
		  40%{
			  top:-784px;
			  left:850px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  50%{
			  top:-784px;
			  left:947px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  60%{
			  top:-660px;
			  left:947px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  70%{
			  top:-537px;
			  left:947px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(1);
		  }
		  80%{
			  top:-414px;
			  left:947px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.8)rotate(360deg);
		  }
		  90%{
			  top:-350px;
			  left:947px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.5)rotate(360deg);
		  }
		  100%{
			  top:-290px;
			  left:947px;
			  background: url(../img/11.png);
			  background-size: 100% 100%;
			  transform: scale(.3)rotate(360deg);
		  }
		  
	  }
	  .cat5{
		  width:200px;
		  height:244px;
		  bor der: 1px solid red;
		  background: url(../img/21.png);
		  background-size: 100% 100%;
		  position: relative;
		  top:-300px;
		  left:761px;
		  animation: cat5 7s linear infinite;
	  }
	  @keyframes cat5{
		  0%{
			  top:-300px;
			  left:762px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  10%{
			  top:-494px;
			  left:539px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  20%{
			  top:-623px;
			  left:364px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  30%{
			  top:-764px;
			  left:200px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  40%{
			  top:-1000px;
			  left:60px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  50%{
			  top:-1000px;
			  left:256px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  60%{
			  top:-1000px;
			  left:426px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  70%{
			  top:-1000px;
			  left:600px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  80%{
			  top:-1000px;
			  left:800px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  90%{
			  top:-1000px;
			  left:1200px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  100%{
			  top:-1000px;
			  left:1939px;
			  background: url(../img/21.png);
			  background-size: 100% 100%;
		  }
		  
		  
	  }
	  .cat6{
	  		  width:350px;
	  		  height:400px;
	  		  bor der: 1px solid red;
	  		  backg round: url(../img/20.png);
	  		  background-size: 100% 100%;
	  		  position: relative;
	  		  top:-945px;
	  		  left:609px;
	  		  animation: cat6 12s linear infinite;
			  }
			  @keyframes cat6{
				  0%{
					  top:-945px;
					  left:609px;
				  }
				  10%{
					  top:-945px;
					  left:609px;
				  }
				  20%{
					  top:-945px;
					  left:609px;
				  }
				  30%{
					  top:-945px;
					  left:609px;
				  }
				  40%{
					  top:-945px;
					  left:609px;
				  }
				  50%{
					  top:-945px;
					  left:609px;
					  
				  }
				  60%{
					  top:-945px;
					  left:609px;
					  
				  }
				  70%{
					  top:-945px;
					  left:609px;
					  
				  }
				  80%{
					  top:-945px;
					  left:609px;
					  background: url(../img/20.png);
					  background-size: 100% 100%;
				  }
				  90%{
					  top:-945px;
					  left:609px;
					  background: url(../img/20.png);
					  background-size: 100% 100%;
				  }
				  100%{
					  top:-945px;
					  left:609px;
					  background: url(../img/20.png);
					  background-size: 100% 100%;
				  }
			  }